<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统统计 - 系统管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/app.css">
    <style>
        .stats-container {
            padding: 20px 0;
        }
        .stats-card {
            margin-bottom: 20px;
        }
        .stats-value {
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            margin: 10px 0;
        }
        .stats-label {
            text-align: center;
            color: #666;
            font-size: 14px;
        }
        .stats-trend {
            text-align: center;
            font-size: 12px;
            margin-top: 5px;
        }
        .stats-trend.up {
            color: #5FB878;
        }
        .stats-trend.down {
            color: #FF5722;
        }
        .chart-container {
            background: white;
            border-radius: 4px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 1px 2px rgba(0,0,0,.1);
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .refresh-time {
            text-align: right;
            color: #999;
            font-size: 12px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <div class="layui-card">
            <div class="layui-card-header">
                <span style="font-size: 18px; font-weight: bold;">系统统计</span>
                <div style="float: right;">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="refreshStats()">
                        <i class="layui-icon layui-icon-refresh"></i>刷新数据
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="exportStats()">
                        <i class="layui-icon layui-icon-export"></i>导出报表
                    </button>
                </div>
            </div>
            <div class="layui-card-body">
                <!-- 刷新时间显示 -->
                <div class="refresh-time" id="refreshTime">
                    最后更新: 加载中...
                </div>

                <!-- 核心指标统计 -->
                <div class="stats-grid">
                    <div class="layui-card stats-card">
                        <div class="layui-card-header">用户统计</div>
                        <div class="layui-card-body">
                            <div class="stats-value" id="userCount" style="color: #1E9FFF;">--</div>
                            <div class="stats-label">注册用户总数</div>
                            <div class="stats-trend" id="userTrend">--</div>
                        </div>
                    </div>
                    
                    <div class="layui-card stats-card">
                        <div class="layui-card-header">项目统计</div>
                        <div class="layui-card-body">
                            <div class="stats-value" id="projectCount" style="color: #5FB878;">--</div>
                            <div class="stats-label">项目总数</div>
                            <div class="stats-trend" id="projectTrend">--</div>
                        </div>
                    </div>
                    
                    <div class="layui-card stats-card">
                        <div class="layui-card-header">活跃会话</div>
                        <div class="layui-card-body">
                            <div class="stats-value" id="activeSessionCount" style="color: #FFB800;">--</div>
                            <div class="stats-label">当前活跃会话</div>
                            <div class="stats-trend" id="sessionTrend">--</div>
                        </div>
                    </div>
                    
                    <div class="layui-card stats-card">
                        <div class="layui-card-header">今日活动</div>
                        <div class="layui-card-body">
                            <div class="stats-value" id="todayActivity" style="color: #FF5722;">--</div>
                            <div class="stats-label">今日登录用户</div>
                            <div class="stats-trend" id="activityTrend">--</div>
                        </div>
                    </div>
                </div>

                <!-- 项目状态分布 -->
                <div class="chart-container">
                    <div class="layui-card-header">项目状态分布</div>
                    <div id="projectStatusChart" style="height: 300px;"></div>
                </div>

                <!-- 用户活跃度 -->
                <div class="chart-container">
                    <div class="layui-card-header">用户活跃度统计</div>
                    <div id="userActivityChart" style="height: 300px;"></div>
                </div>

                <!-- 详细统计表格 -->
                <div class="chart-container">
                    <div class="layui-card-header">详细统计信息</div>
                    <table class="layui-table" id="detailStatsTable">
                        <thead>
                            <tr>
                                <th>统计项</th>
                                <th>数量</th>
                                <th>占比</th>
                                <th>趋势</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody id="detailStatsBody">
                            <!-- 动态生成 -->
                        </tbody>
                    </table>
                </div>

                <!-- 系统信息 -->
                <div class="chart-container">
                    <div class="layui-card-header">系统运行信息</div>
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md6">
                            <table class="layui-table">
                                <tr>
                                    <td width="40%">服务器时间</td>
                                    <td id="serverTime">--</td>
                                </tr>
                                <tr>
                                    <td>系统运行时间</td>
                                    <td id="systemUptime">--</td>
                                </tr>
                                <tr>
                                    <td>数据库连接</td>
                                    <td><span class="layui-badge layui-bg-green" id="dbStatus">正常</span></td>
                                </tr>
                            </table>
                        </div>
                        <div class="layui-col-md6">
                            <table class="layui-table">
                                <tr>
                                    <td width="40%">API响应状态</td>
                                    <td><span class="layui-badge layui-bg-green" id="apiStatus">正常</span></td>
                                </tr>
                                <tr>
                                    <td>会话服务</td>
                                    <td><span class="layui-badge layui-bg-green" id="sessionStatus">正常</span></td>
                                </tr>
                                <tr>
                                    <td>最后数据同步</td>
                                    <td id="lastSyncTime">--</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/config/api.js"></script>
    <script src="/js/http.js"></script>
    <script src="/layui/layui.js"></script>
    <script>
        let statsData = {};
        let lastStatsData = {};

        layui.use(['table', 'util'], function(){
            var table = layui.table;
            var util = layui.util;

            // 初始化加载统计数据
            loadSystemStats();
            
            // 每分钟自动刷新一次
            setInterval(loadSystemStats, 60000);
            
            // 每秒更新服务器时间
            setInterval(updateServerTime, 1000);
        });

        // 加载系统统计数据
        function loadSystemStats() {
            var loading = layui.layer.load(1);
            
            http.get(API_CONFIG.ADMIN.STATS)
                .then(function(res) {
                    layui.layer.close(loading);
                    
                    if (res.code === 0 && res.data) {
                        statsData = res.data;
                        updateStatsDisplay();
                        updateCharts();
                        updateDetailStats();
                        updateRefreshTime();
                        
                        // 保存上一次的数据用于趋势计算
                        setTimeout(() => {
                            lastStatsData = {...statsData};
                        }, 1000);
                    } else {
                        layui.layer.msg('获取统计数据失败: ' + (res.msg || '未知错误'));
                    }
                })
                .catch(function(err) {
                    layui.layer.close(loading);
                    layui.layer.msg('加载统计数据失败: ' + (err.msg || '网络错误'));
                    console.error('统计数据加载错误:', err);
                });
        }

        // 更新统计数据显示
        function updateStatsDisplay() {
            // 核心指标
            document.getElementById('userCount').textContent = statsData.user_count || '0';
            document.getElementById('projectCount').textContent = statsData.project_count || '0';
            document.getElementById('activeSessionCount').textContent = statsData.active_sessions || '0';
            document.getElementById('todayActivity').textContent = statsData.today_login || '0';
            
            // 趋势计算
            updateTrends();
        }

        // 更新趋势信息
        function updateTrends() {
            if (!lastStatsData.user_count) return;
            
            // 用户趋势
            const userTrend = calculateTrend(statsData.user_count, lastStatsData.user_count);
            updateTrendElement('userTrend', userTrend, '用户');
            
            // 项目趋势
            const projectTrend = calculateTrend(statsData.project_count, lastStatsData.project_count);
            updateTrendElement('projectTrend', projectTrend, '项目');
            
            // 会话趋势
            const sessionTrend = calculateTrend(statsData.active_sessions, lastStatsData.active_sessions);
            updateTrendElement('sessionTrend', sessionTrend, '会话');
            
            // 活动趋势
            const activityTrend = calculateTrend(statsData.today_login, lastStatsData.today_login);
            updateTrendElement('activityTrend', activityTrend, '活动');
        }

        // 计算趋势
        function calculateTrend(current, previous) {
            if (!previous || previous === 0) return { change: 0, percent: 0 };
            
            const change = current - previous;
            const percent = previous > 0 ? ((change / previous) * 100) : 0;
            
            return { change, percent };
        }

        // 更新趋势元素显示
        function updateTrendElement(elementId, trend, label) {
            const element = document.getElementById(elementId);
            if (trend.change > 0) {
                element.innerHTML = `<span class="stats-trend up">↑ ${trend.change} (${trend.percent.toFixed(1)}%)</span>`;
            } else if (trend.change < 0) {
                element.innerHTML = `<span class="stats-trend down">↓ ${Math.abs(trend.change)} (${Math.abs(trend.percent).toFixed(1)}%)</span>`;
            } else {
                element.innerHTML = `<span class="stats-trend">→ 无变化</span>`;
            }
        }

        // 更新图表（简化版，实际项目中可以使用ECharts等图表库）
        function updateCharts() {
            // 项目状态分布图数据
            const projectStatusData = statsData.project_status || {
                designing: statsData.design_count || 0,
                acceptance: statsData.accept_count || 0,
                auditing: statsData.audit_count || 0
            };
            
            // 用户活跃度数据
            const userActivityData = statsData.user_activity || {
                active: statsData.active_users || 0,
                inactive: (statsData.user_count || 0) - (statsData.active_users || 0)
            };
            
            // 这里可以集成图表库，如ECharts
            console.log('项目状态数据:', projectStatusData);
            console.log('用户活跃度数据:', userActivityData);
            
            // 简单文本显示
            document.getElementById('projectStatusChart').innerHTML = 
                `<div style="text-align: center; padding: 50px;">
                    <div>设计中: ${projectStatusData.designing} 项目</div>
                    <div>验收中: ${projectStatusData.acceptance} 项目</div>
                    <div>审计中: ${projectStatusData.auditing} 项目</div>
                </div>`;
                
            document.getElementById('userActivityChart').innerHTML = 
                `<div style="text-align: center; padding: 50px;">
                    <div>活跃用户: ${userActivityData.active} 人</div>
                    <div>非活跃用户: ${userActivityData.inactive} 人</div>
                </div>`;
        }

        // 更新详细统计表格
        function updateDetailStats() {
            const tbody = document.getElementById('detailStatsBody');
            const rows = [
                { name: '总用户数', value: statsData.user_count || 0, percent: '100%', trend: '基准', desc: '系统注册用户总数' },
                { name: '活跃用户', value: statsData.active_users || 0, percent: calculatePercent(statsData.active_users, statsData.user_count), trend: '实时', desc: '最近7天有活动的用户' },
                { name: '总项目数', value: statsData.project_count || 0, percent: '100%', trend: '基准', desc: '所有项目总数' },
                { name: '设计中项目', value: statsData.design_count || 0, percent: calculatePercent(statsData.design_count, statsData.project_count), trend: '进行中', desc: '处于设计阶段的项目' },
                { name: '今日登录', value: statsData.today_login || 0, percent: calculatePercent(statsData.today_login, statsData.user_count), trend: '今日', desc: '今天登录系统的用户数' },
                { name: '活跃会话', value: statsData.active_sessions || 0, percent: calculatePercent(statsData.active_sessions, statsData.user_count), trend: '实时', desc: '当前活跃的会话数量' }
            ];
            
            tbody.innerHTML = rows.map(row => `
                <tr>
                    <td>${row.name}</td>
                    <td><strong>${row.value}</strong></td>
                    <td>${row.percent}</td>
                    <td><span class="layui-badge layui-bg-blue">${row.trend}</span></td>
                    <td>${row.desc}</td>
                </tr>
            `).join('');
        }

        // 计算百分比
        function calculatePercent(part, total) {
            if (!total || total === 0) return '0%';
            return ((part / total) * 100).toFixed(1) + '%';
        }

        // 更新刷新时间
        function updateRefreshTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
            document.getElementById('refreshTime').textContent = '最后更新: ' + timeString;
        }

        // 更新服务器时间
        function updateServerTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
            document.getElementById('serverTime').textContent = timeString;
        }

        // 刷新统计数据
        window.refreshStats = function() {
            loadSystemStats();
            layui.layer.msg('数据刷新中...', { icon: 16, time: 1000 });
        }

        // 导出报表
        window.exportStats = function() {
            layui.layer.msg('导出功能开发中...', { icon: 1 });
            // 实际项目中这里可以实现导出Excel或PDF功能
        }

        // 初始化服务器时间
        updateServerTime();
    </script>
</body>
</html>